<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格编辑</title>
    <script src="../lib/easytable.js"></script>
    <link type="text/css" rel="stylesheet" href="../lib/easytable.css" />
    <script>
        let table;
        window.onload = function () {
            let option = {
                cols: [{ title: '名字', field: 'name', editable: true, width: '80px' },
                { title: '学号', field: 'num', editable: true }, { title: '成绩', field: 'mark' }, { title: '性别', field: 'sex', type: 'select', select: [{ 'text': '男', 'value': 'boy' }, { 'text': '女', 'value': 'girl' }] }, { title: '爱好', field: 'hobby', editable: true, type: 'select', select: [{ 'text': 'swim', 'value': '游泳' }, { 'text': 'run', 'value': '跑步' }] }],
                data: [{ name: 'yh', num: 123, mark: 99, sex: 'boy', hobby: 'swim' }, { name: 'yh', num: 123, mark: 99, sex: 'boy', hobby: 'run' }, { name: 'yh', num: 123, mark: 99, sex: 'girl', hobby: 'run' }]
            }
            table = new easytable("table", option);
        }
        function getData() {
            alert(JSON.stringify(table.data));
        }
    </script>
</head>

<body>
    <div id='table'></div>

    <button onclick="getData()">获取table数据</button>
</body>

</html>